<template>
    <div class="marign_auto">
        <Head>
            <h1>我的钱包</h1>
        </Head>
        <div class="flas_xis">
            <div class="mingxi_mudaikuangdanji">
                <div class="border_left">
                    <p>
                        我的平驾币&nbsp;&nbsp;
                        <van-icon name="question"></van-icon>
                    </p>
                    <p>
                        <span class="storng">{{this.$store.state.user.accountBalance }}</span>
                        &nbsp;&nbsp;枚
                    </p>
                </div>
                <div>
                    <div is-link @click="showPopup" class="bor_rder">使用明细</div>
                </div>
            </div>
            <div class="mingxi_mudaikuangdanji">
                <div class="border_left">
                    <p>
                        可用积分&nbsp;&nbsp;
                        <van-icon name="question"/>
                    </p>
                    <p>
                        <span class="storng">{{ this.$store.state.user.integration }}</span> &nbsp;&nbsp;分
                    </p>
                </div>
                <div>
                    <div is-link @click="showPopup" class="bor_rder">使用明细</div>
                </div>
            </div>
        </div>
        <van-popup v-model="show" :style="{ height: '3.28rem', width: '4.5rem', fontSize: '.24rem' }">
            <div class="taichu_c">
                <p>使用说明</p>
                <div>
                    <p>1.1平驾币＝1元</p>
                    <p>2.平驾币可用于冲抵租车消费</p>
                    <p>3.平驾币不可取现</p>
                    <p>4.1积分=1元，每单最高可使用积分冲抵40%的租车费用</p>
                </div>
            </div>
        </van-popup>
        <div class="recharge">
            <div class="nav_flas">充值额度</div>
            <ul class="jussd_s">
                <li
                        v-for="(item, index) in list"
                        :key="index"
                        @click="bianse(index)"
                        :class="item.flass ? 'bor_bluck' : ''"
                >
                    <p @click="getadd(item)">
                        <span>{{ item.num }}</span>枚
                    </p>
                    <p class="last_ch">
                        送
                        <span>{{ item.somois }}</span>积分
                    </p>
                </li>

                <li v-if="ifels" @click="qitas">
                    <p>
                        <span>其他金额</span>
                    </p>
                </li>
                <li class="botm_sc" v-else>
                    <input type="text" v-model="addmoney"/>
                </li>
            </ul>
        </div>
        <div v-show="flsdd">
            <van-radio-group v-model="radio">
                <van-cell-group>
                    <van-cell clickable @click="radio = '1'" class="wei_x">
                        <img src="../../assets/dingdanxinxi/weixin.jpg" alt/>
                        微信
                        <template #right-icon>
                            <van-radio name="1" icon-size=".32rem"></van-radio>
                        </template>
                    </van-cell>
                    <van-cell clickable @click="radio = '2'" class="wei_x">
                        <img src="../../assets/dingdanxinxi/zhifubao.jpg" alt/>
                        支付宝
                        <template #right-icon>
                            <van-radio name="2" icon-size=".32rem"></van-radio>
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <div class="wei_x">
                <div>
                    <span>更多支付方式</span>
                </div>
                <van-icon name="play" class="xuan_zhuan"/>
            </div>
        </div>
        <div :class="flsdd ? 'zhifu' : 'zhifus'" v-text="zhifus" @click="tijiao"></div>
    </div>
</template>

<script>
    import Vue from "vue";
    import {Toast} from "vant";
    import Head from "../jingtai_/header";
    import {bag, addmoney} from "../../request/userinfo/userinfo";

    Vue.use(Toast);
    export default {
        props: {},
        data() {
            return {
                show: false,
                radio: "1",
                activeIcon: "./../../assets/weixin.png",
                inactiveIcon: "./../../assets/zhifubao.png",
                only: "",
                zhifus: "立即充值",
                flsdd: false,
                ifels: true,
                addmoney: 0,
                list: [
                    {
                        num: "500",
                        somois: "50",
                        flssdd: false,
                        flass: false,
                    },
                    {
                        num: "1000",
                        somois: "100",
                        flssdd: false,
                        flass: false,
                    },
                    {
                        num: "2000",
                        somois: "200",
                        flssdd: false,
                        flass: false,
                    },
                    {
                        num: "5000",
                        somois: "1000",
                        flssdd: false,
                        flass: false,
                    },
                    {
                        num: "10000",
                        somois: "3000",
                        flssdd: false,
                        flass: false,
                    },
                ],
                userbag: {},
            };
        },
        mounted() {
            //alert(111);
            // alert(this.$store.use.id);
            bag({
                id: this.$store.state.user.id,
            }).then((res) => {
                console.log(res);
                this.$store.state.user = res.t;
            });
        },
        methods: {
            getadd(v) {
                // console.log(v.num);
                this.addmoney = v.num;
            },
            tijiao() {
                if (this.flsdd === true) {
                    Toast.loading({
                        message: "模拟充值...",
                        size: "100px",
                        textSize: ".4rem",
                        forbidClick: true,
                        loadingType: "spinner",
                        overlay: true,
                        closeOnClickOverlay: true,
                    });
                }

                addmoney({
                    amount: this.addmoney,
                    memberId: this.$store.state.user.id,
                    payId: this.radio,
                    typeId: 2,
                })
                    .then((res) => {
                        console.log(res);
                    })
                    .then(() => {
                        bag({
                            id: this.$store.state.user.id,
                        }).then((res) => {
                            //console.log("最新赋值："+JSON.stringify(res));
                            //this.$store.state.userbag = res.data;
                            this.$store.state.user = res.t;
                            this.$router.push("/wallet");
                        });
                    });
            },
            showPopup() {
                this.show = true;
            },
            bianse(v) {
                this.list.forEach((item) => {
                    item.flass = false;
                });
                this.list[v].flass = true;
                this.flsdd = true;
                this.ifels = true;
            },
            qitas() {
                this.list.forEach((item) => {
                    item.flass = false;
                });
                this.flsdd = true;
                this.ifels = false;
            },
        },
        components: {
            Head,
        },
    };
</script>

<style scoped lang="less">
    .marign_auto {
        font-size: 0.24rem;
        margin: 0 0.24rem;
    }

    .flas_xis {
        height: 4.44rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .flas_xis > div:last-child {
        background-color: #f3966e;
        .bor_rder {
            background-color: #f08c29;
        }
    }

    .mingxi_mudaikuangdanji {
        width: 100%;
        background-color: #1885fe;
        height: 2rem;
        border-radius: 0.18rem;
        display: flex;
        justify-content: space-between;
        .border_left {
            margin-left: 0.48rem;
            color: white;
            & > p:last-child {
                margin-top: 0.1rem;
            }
            & > p {
                font-size: 0.24rem;
                & > .storng {
                    font-size: 0.48rem;
                }
            }
        }
        & > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }
        & > div > .bor_rder {
            color: white;
            font-size: 0.24rem;
            background-color: #0d5fd7;
            width: 1.32rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            border-top-left-radius: 0.3rem;
            border-bottom-left-radius: 0.3rem;
        }
    }

    .recharge {
        font-size: 0.28rem;
        color: #000;
        .nav_flas {
            line-height: 0.86rem;
            height: 0.86rem;
        }
        .jussd_s {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
            & > .bor_bluck {
                border-left: 2px solid #3d88f7;
                border-right: 2px solid #3d88f7;
                border-top: 2px solid #3d88f7;
                border-bottom: 2px solid #3d88f7;
            }
            & > li {
                box-sizing: border-box;
                width: 2.24rem;
                height: 0.99rem;
                border-radius: 0.06rem;
                background-color: #f2f2f2;
                border-top: 2px solid #fafafa;
                border-bottom: 2px solid #fafafa;
                display: flex;
                flex-direction: column;
                text-align: center;
                justify-content: center;
                margin-bottom: 0.09rem;
                & > .last_ch {
                    margin-top: 0.1rem;
                    font-size: 0.24rem;
                    color: #333333;
                }
            }
        }
    }

    .taichu_c {
        color: #333333;
        margin: 0.38rem 0.3rem 0.3rem 0.3rem;
        & > p {
            font-size: 0.28rem;
        }
        & > div {
            margin-top: 0.24rem;
        }
        & > div > p {
            line-height: 0.38rem;
        }
    }

    .wei_x {
        font-size: 0.28rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.8rem;
        padding: 0;
        & > div {
            display: flex;
            align-items: center;
            & > img {
                margin-right: 0.29rem;
                width: 0.48rem;
                height: 0.48rem;
            }
        }
    }

    .xuan_zhuan {
        transform: rotateZ(90deg);
        width: 0.26rem;
        height: 0.26rem;
    }

    .zhifu {
        font-size: 0.36rem;
        border-radius: 0.08rem;
        background-color: #3d88f7;
        color: white;
        width: 5rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        margin: 0.35rem auto 0;
    }

    .zhifus {
        font-size: 0.36rem;
        border-radius: 0.08rem;
        background-color: #f2f2f2;
        color: #999999;
        width: 5rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        margin: 0.35rem auto 0;
    }

    .botm_sc {
        input {
            height: 100%;
            width: 100%;
            color: #0d5fd7;
            text-align: center;
            border: none;
            border: 2px solid #3d88f7;
            border-radius: 0.08rem;
        }
    }

    .van-loading__spinner--spinner {
        width: 1rem !important;
        height: 1rem !important;
    }

    .van-toast {
        width: 1rem;
        height: 1rem;
    }
</style>